<template>
    <!-- <span>MonitorSettings</span> -->
    <div class="out">
        <div class="out1">
            <span class="title">添加可通行人员</span>
            <div class="ablock">
                <!-- <el-input v-model="textMessage" placeholder="请输入播报信息" class="txtInput"></el-input> -->
                <span style="color: gray;
                            font-size: 12px;
                            padding: 0px 10px 0;
                            display: block;
                            margin: 5px 0px;">输入通行人员信息： 
                </span>
                <el-input v-model="Pname" placeholder="请输入姓名" class="txtInput">></el-input>
                <el-button type="primary" @click="handleAdd">添 加</el-button>
            </div>
            <el-dialog title="提 示" :visible.sync="dialogVisible" width="30%" top="15%" :before-close="handleClose">
                <span>提示内容</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible=false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible=false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="out1">
            <span class="title">人员白名单</span>
            <div class="ablock">
                <el-table :data="tableData">
                    <el-table-column prop="pname" label="姓名" width="220"></el-table-column> 
                    <el-table-column prop="ptime" label="登记时间" width="340"></el-table-column> 
                </el-table>
            </div>
        </div>
        <div class="out1">
            <span class="title">选项</span>
            <div class="ablock">
                <table class="table">
                    <tr>
                        <td>开门时间提醒</td>
                        <td style="float: right;"><switchc text="开启|关闭" v-model="status1"></switchc></td>
                    </tr>
                    <tr v-if="status1">
                        <td></td>
                        <td>
                            <span>当关门时间超过 </span>
                            <input v-model="closeTime" class="inlineInput">
                            <span> min 时进行语音提醒</span>
                        </td>
                    </tr>
                    <tr>
                        <td>久坐提醒</td>
                        <td style="float: right;"><switchc text="开启|关闭" v-model="status2"></switchc></td>
                    </tr>
                    <tr v-if="status2">
                        <td></td>
                        <td>
                            <span>当学习时间超过 </span>
                            <input v-model="studyTime" class="inlineInput">
                            <span> min 时进行语音提醒</span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import switchc from "./Aswitch";

export default {
    name: 'monitorSettings',
    components: {
        switchc
    },
    data : function () {
        return {
            Pname: '',
            tableData: [],
            dialogVisible: false,
            status1: true,
            status2: true,
            closeTime: 60,
            studyTime: 60
        }
    },
    created: function () {
        this.init()
    },
    methods: {
        init() {
            this.tableData = [
                {
                    pname: 'test1',
                    ptime: '2022-01-01'
                },
                {
                    pname: 'test2',
                    ptime: '2022-01-01'
                },
                {
                    pname: 'test3',
                    ptime: '2022-01-01'
                }
            ]
        },
        handleAdd() {
            // 显示弹窗
            this.dialogVisible = true
        },
        handleClose() {
            // 点击x关闭方法
            this.dialogVisible = false
        },
    }
}
</script>

<style>
    .out {
        margin: 30px 90px;
        width: 100%;
    }
    .out1 {
        /* margin: 0 0 10px; */
        width: 85%;
    }
    .title {
        margin: 15px 0;
        padding-left: 12px;
        line-height: 30px;
        display: block;
        color: whitesmoke;
        /* rgba(245, 245, 245, 0.3) */
    }
    .txtInput {
        margin: 10px 0 20px 0;
    }
    .ablock {
        padding: 14px 30px;
        background: whitesmoke;
        border-radius: 10px;
    }
    .say {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        border: none;
        margin: 5px 0px 0px 0px;
        /* background-image: url('../assets/image/say.png'); */
    }
    .textSay {
        display: inline-block;
        vertical-align: top;
        height: 100%;
        margin: 10px 30px;
        color: gray;
        user-select: none;
    }
    .bblock {
        padding: 14px 30px;
        background: whitesmoke;
        border-radius: 10px;
        align-items:center;
    }
</style>